<template>
    <NavBar :show-icon="false" title-text="名师" bg-color="rgb(155, 227, 229)" />
    <div class="main">
        <view class="top" :style="{ top: systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view class="dispaly-just-between search">
                <view class="ipt">
                    <tn-search-box @search="search" :search-button="false" size="sm" :border="false"
                        v-model="queryData.keywords" placeholder="搜索名师" />
                </view>

                <view class="cate w-100">
                    <view class="item dispaly" @click="navTo(`/subPackage/index/selectCityPage`)">
                        <view class="text">地域</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                    <view class="item dispaly" @click="cateOpen">
                        <view class="text">筛选</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="list-box"
            :style="{ marginTop: topNavheight + systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <Empty v-if="!loadShow && !tearchListData.length" text="暂无名师" />
            <view class="item-box">
                <view class="list-item" v-for="(item, index) in tearchListData" :key="item.id"
                    @click.stop="navTo(`/subPackage/community/userDetail?id=${item.user_id}&is_care=${item.is_care}`)">
                    <view class="tops dispaly-just-between">
                        <view class="user dispaly-center">
                            <view class="avatar">
                                <image mode="aspectFill" :src="item.avatar" />
                            </view>
                            <view class="name over-1">{{ item.nickname }}</view>
                        </view>
                        <view class="option">

                            <view @click.stop="care(item.user_id, index)" v-if="item.is_care == 0">
                                <image src="/static/icon/pl.png" />
                            </view>
                            <view class="w" @click.stop="cancenCare(item.user_id, index)" v-else>
                                <tn-icon name="reduce" color="#008298" size="30" />
                            </view>
                            <view @click.stop="navTo(`/subPackage/community/chat?name=${item}`)">
                                <image src="/static/icon/lt.png" />
                            </view>
                        </view>
                    </view>
                    <view class="desc over-1">{{ item.introduce }}
                    </view>
                    <view class="tip-box">
                        <!-- v-for="item in 7" -->
                        <view class="tip  dispaly-align-center over-1" v-for="t in item.good_at.split(',')">{{ t }}
                        </view>
                    </view>
                    <view class="co">
                        <image src="/static/icon/co.png" />
                    </view>
                </view>
            </view>
            <LoadMore :status="status" :show="loadShow" />
        </view>
        <!-- 地址 -->
        <!-- <SelectArea :tab="true" :show-popup="showPopup" @close="show => showPopup = show" /> -->
        <!-- 分类 -->
        <SelectCate v-if="jobCateListData.length" :data="jobCateListData" @confirm="confirm" :tab="true"
            :show-cate="cateShow" @close="show => cateShow = show" />
    </div>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { onLoad, onReachBottom, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import { ref, onMounted, reactive } from 'vue';
import SelectCate from '@/pages/index/components/selectCate.vue'
import { getElementHeight } from '@/utils/util'
import { getTearchList, getJobCate } from '@/api/home/home'
import type { RequestJobParmType } from '@/types/requstParm'
import type { TeacherType, CateType } from '@/types/responseData'
import type { RequestAddCareType } from '@/types/requstParm'
import { postAddCare, postCancelCare } from '@/utils/util'

// 添加关注
const formData = reactive<RequestAddCareType>({
    user_id: 2,
    relation_id: '',
    type: 1
})

// 关注
const care = async (id: number, index: number) => {
    formData.relation_id = id
    const res = await postAddCare(formData)
    if (res == 'ok') {
        tearchListData.value[index].is_care = 1
    }
}

// 取消关注
const cancenCare = async (id: number, index: number) => {
    const res = await postCancelCare(id, 1)
    if (res == 'ok') {
        tearchListData.value[index].is_care = 0
    }
}

const selCityGetData = () => {
    queryData.city_id = ''
    let pages = getCurrentPages()
    let currPage = pages[pages.length - 1] as any //当前页
    let id = currPage.data.id
    if (id) {
        queryData.city_id = id
        init()
        getListData()
        currPage.data.id = ''
    }
}

onShow(() => {
    selCityGetData()
})

// 获取名师列表
const queryData = reactive<RequestJobParmType>({
    page: 1,
    limit: 10,
    keywords: '',
    cat_name: '',
    cat_id: '',
    user_id: 2
})

// 选择的职位分类
const confirm = (valueId: number) => {
    queryData.cat_name = valueId
    init()
    getListData()
}

// 请求职位列表
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let tearchListData = ref<Array<TeacherType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getTearchList(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            tearchListData.value = [...tearchListData.value, ...res.data.list]
        } else {
            status.value = 'nomore'
        }
    }
}

const search = () => {
    init()
    queryData.cat_name = ''
    getListData()
}

// 初始化
const init = () => {
    loadShow.value = false
    tearchListData.value = []
    queryData.page = 1
}

let systemInfo = uni.getStorageSync('systemInfo')
// 地址弹窗
const showPopup = ref<boolean>(false)
const addressShow = () => {
    showPopup.value = true
    uni.hideTabBar()
}


// 获取职位分类
const jobCateListData = ref<Array<CateType>>([])
const getJobCateListData = async () => {
    const res = await getJobCate()
    if (res.code == 0) {
        jobCateListData.value = res.data
    }
}

// 分类弹窗
const cateShow = ref<boolean>(false)
const cateOpen = () => {
    cateShow.value = true
    uni.hideTabBar()
    getJobCateListData()
}
const searchValue = ref<string>('')
onLoad((option) => {
    searchValue.value = option!.searchValue as string
})

// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    getListData()
    const height = await getElementHeight('.top')
    topNavheight.value = height
})

// 触底分页
onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

// 下拉刷新
onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中'
    })
    queryData.city_id = ''
    queryData.cat_name = ''
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

</script>
<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #fff !important;
}

.list-box {
    padding: 20rpx 30rpx;

    .item-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .list-item {
            background: #FFFFFF;
            border-radius: 20rpx;
            padding: 34rpx 20rpx;
            width: 48%;
            margin-bottom: 20rpx;
            // max-height: 356rpx;

            .tops {
                .user {
                    .avatar {
                        margin-right: 15rpx;

                        image {
                            width: 89rpx;
                            height: 89rpx;
                            border-radius: 50%;
                        }
                    }

                    .name {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: bold;
                        font-size: 30rpx;
                        color: #000000;
                    }
                }

                .option {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .w {
                        border: 1rpx solid #008298;
                        width: 78rpx;
                        height: 30rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 10rpx;
                        border-radius: 30rpx;
                    }

                    image {
                        width: 78rpx;
                        height: 30rpx;
                    }
                }
            }

            .desc {
                margin-top: 20rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #7E7E7E;
                line-height: 40rpx;
            }

            .tip-box {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin-top: 10rpx;

                .tip {
                    padding: 2rpx 4rpx;
                    background: #FFFFFF;
                    border-radius: 6rpx;
                    border: 1rpx solid #B8B8B8;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #A4A4A4;
                    margin-right: 10rpx;
                    margin-bottom: 10rpx;
                }
            }

            .co {
                display: flex;
                justify-content: flex-end;

                image {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }
    }

}


.top {
    background-color: #fff;
    padding: 0 30rpx 13rpx 30rpx;
    position: fixed;
    z-index: 999;
    // top: 0;
    width: 100%;
    background-color: #fafafa;
    // background: rgb(155, 227, 229);
    // background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(250, 250, 250, 1) 100%, rgba(250, 250, 250, 1) 100%);
    padding-bottom: 20rpx;

    .search {
        .ipt {
            margin-right: 17rpx;
            flex: 5;
        }
    }

    .cate {
        flex: 0.5;
        // padding-right: 30rpx;
        display: flex;
        justify-content: flex-end;

        .item:first-child {
            margin-right: 20rpx;
        }

        .item {
            background-color: #fff;
            border-radius: 10rpx;
            width: 96rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            justify-content: center;

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #717171;
            }

            .s {
                image {
                    width: 15rpx;
                    height: 15rpx;
                }
            }
        }
    }
}
</style>